<header>
    <title>权限列表</title>
</header>
{include file="public/header" /}
        <!-- 内容主体区域 -->

<div class="page-wrapper">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>权限列表</legend>
    </fieldset>
    <div class="layui-btn-container" style="display: inline-block;">
<!--        <a href="async.html" class="layui-btn layui-btn-sm layui-btn-normal">-->
<!--            <i class="layui-icon">&#xe64d;</i>异步加载-->
<!--        </a>-->
<!--        <a href="icon.html" class="layui-btn layui-btn-sm layui-btn-normal">-->
<!--            <i class="layui-icon">&#xe639;</i>自定义图标-->
<!--        </a>-->
<!--        <a href="edit.html" class="layui-btn layui-btn-sm layui-btn-normal">-->
<!--            <i class="layui-icon">&#xe642;</i>单元格编辑-->
<!--        </a>-->
<!--        <a href="editAdv.html" class="layui-btn layui-btn-sm layui-btn-normal">-->
<!--            <i class="layui-icon">&#xe642;</i>单元格编辑扩展-->
<!--        </a>-->
<!--        <a href="https://whvse.gitee.io/treetable/" class="layui-btn layui-btn-sm layui-btn-warm" target="_blank">-->
<!--            bom表格-->
<!--        </a>-->


    </div>
    <button id="add" class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon layui-icon-addition"></i>添加
    </button>
    <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon">&#xe666;</i>重载
    </button>
    <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon">&#xe669;</i>刷新
    </button>
    <!--        <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-primary">获取选中</button>-->
<!--    <button id="btnToggleSide" class="layui-btn layui-btn-sm layui-btn-primary">演示侧边栏</button>-->

    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe668;</i>展开全部
        </button>
        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe66b;</i>折叠全部
        </button>
<!--        <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">-->
<!--            <i class="layui-icon">&#xe625;</i>展开用户管理-->
<!--        </button>-->
<!--        <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">-->
<!--            <i class="layui-icon">&#xe623;</i>折叠用户管理-->
<!--        </button>-->
<!--        <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">-->
<!--            <i class="layui-icon">&#xe605;</i>勾选添加用户-->
<!--        </button>-->
    </div>

    <br />
    <input class="layui-input" id="edtSearch"  placeholder="输入权限名称"
           style="display: inline-block;width: 240px;height: 30px;line-height: 30px;padding: 0 5px;margin: 0 5px 0 15px;"/>
    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe615;</i>搜索
        </button>
        <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#x1006;</i>清除搜索
        </button>
    </div>


    <div class="demo-side">
        <table id="demoTreeTb"></table>
    </div>
</div>


{include file="public/footer" /}
<!--<script>-->
<!--    layui.config({-->
<!--        base: '../static/treetable'  // 配置模块所在的目录-->
<!--    }).use(['treeTable'], function () {-->
<!--        var treeTable = layui.treeTable;-->

<!--    });-->
<!--</script>-->


<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.config({
        base: '/static/treetable/'
    }).use(['layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: 'data',
            //toolbar: 'default',  默认的表头工具栏
            height: 'full-200',
            text: {
                none: '<div style="padding: 18px 0;">权限为空，请添加权限</div>'
            },
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'id',
                pidName: 'node_partent'
            },
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID',width:170},
                {field: 'node_grade', title: '权限等级',width:170},
                {field: 'node_name', title: '权限名称',width:170},
                {field: 'node_url', title: '权限地址',width:170},
                {field: 'create_time', title: '创建时间'},
                {field: 'update_time', title: '修改时间'},
                {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
            ]],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var event = obj.event;
            var data = obj.data;

            if (event === 'del') {
                $.post(
                    'del',
                    {
                        id:data.id
                    },
                    function (data) {
                        layer.msg(data.msg);
                        if(data.code == 0){
                            obj.del();
                        }
                })
                // layer.msg('删除成功');
                // obj.del();
            } else if (event === 'edit') {
                location.href="update/id/"+data.id;
            }
        });

        // 头部工具栏点击事件
        // treeTable.on('toolbar(demoTreeTb)', function (obj) {
        //     switch (obj.event) {
        //         case 'add':
        //             layer.msg('添加');
        //             break;
        //         case 'delete':
        //             layer.msg('删除');
        //             break;
        //         case 'update':
        //             layer.msg('编辑');
        //             break;
        //         case 'LAYTABLE_TIPS':
        //             layer.msg('提示');
        //             break;
        //     }
        // });

        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        // // 展开指定
        // $('#btnExpand').click(function () {
        //     insTb.expand(2);
        // });
        //
        // // 折叠指定
        // $('#btnFold').click(function () {
        //     insTb.fold(2);
        // });

        // 设置选中
        $('#btnChecked').click(function () {
            insTb.expand(4);
            insTb.setChecked([4]);
        });

        // 搜索
        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });

        // 清除搜索
        $('#btnClearSearch').click(function () {
            insTb.clearFilter();
        });

        // 重载
        $('#btnReload').click(function () {
            insTb.reload();
        });
        $('#btnRefresh').click(function () {
            insTb.refresh();
        });

        //添加
        $('#add').click(function () {
            location.href="add";
        });

        // 获取选中
        $('#btnGetChecked').click(function () {
            layer.alert('<pre>' + JSON.stringify(insTb.checkStatus().map(function (d) {
                return {
                    authorityName: d.authorityName,
                    authorityId: d.authorityId,
                    LAY_INDETERMINATE: d.LAY_INDETERMINATE
                };
            }), null, 3) + '</pre>');
        });

        // 演示侧边栏
        $('#btnToggleSide').click(function () {
            $('.demo-side').toggleClass('show');
        });

    });
</script>